<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="static/admin/css/admin.css" />
</head>

<body>
<div class="wrap-container welcome-container">
    <div class="wrap-container clearfix">
        <div class="column-content-detail">
            <div class="layui-form-item">
                <div class="layui-block">
                    <div class="search-item">
                        按手机号搜索
                        <input type="text" oninput="value=value.replace(/[^0123456789]/g,'')" name="searchphone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="keywords layui-input">
                        <button class="layui-btn layui-btn-normal searchphone">搜索</button>
                    </div>
                    <div class="search-item">
                        按上级手机号搜索
                        <input type="text" oninput="value=value.replace(/[^0123456789]/g,'')" name="searchtopphone" required lay-verify="required" placeholder="请输入上级手机号" autocomplete="off" class="keywords layui-input">
                        <button class="layui-btn layui-btn-normal searchtopphone">搜索</button>
                    </div>
                </div>
            </div>
            <div class="layui-form" id="table-list">
                <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>上级姓名</th>
                        <th>上级手机号</th>
                        <th>级别</th>
                        <th>VIP</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="table-content">

                    </tbody>
                </table>
                <div id="page" class="page-wrap"></div>
            </div>
        </div>
    </div>
</div>
<!--用户编辑弹窗-->
<div class="user-edit-popup">
    <form class="layui-form" id="form">
        <input type="hidden" name="id" id="user-id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="realname" data-name="姓名" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="required layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="name" data-name="手机号" disabled required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="required layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="refereesName" data-name="上级姓名" required lay-verify="required" placeholder="请输入上级手机号" autocomplete="off" class="layui-input required" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="refereesCode" data-name="上级手机号" required lay-verify="required" placeholder="请输入上级姓名" autocomplete="off" class="layui-input required" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-inline">
                <!--<input type="text" name="level" data-name="级别" required lay-verify="required" placeholder="请输入级别" autocomplete="off" class="layui-input required">-->
                <select id="level" name="level" lay-verify="">
                    <option value="">请选择级别</option>
                    <option value="M1">M1</option>
                    <option value="M2">M2</option>
                    <option value="M3">M3</option>
                    <option value="M4">M4</option>
                    <option value="M5">M5</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">VIP</label>
            <div class="layui-input-inline">
                <div class="layui-form-item">
                    <select id="isVIP" name="isVIP" lay-verify="">
                        <option value="">是否是VIP</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<script src="static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="static/admin/js/baseUrl.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'form', 'laypage'], function() {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
        var laypage = layui.laypage;
        // 请求参数
        var requestData = {
            currentNum: 1,
            currentSize: 10,
            phone: null,
            referees: null
        };
        // 获取数据
        function getList(params) {
            $.ajax({
                url: baseUrl + '/user/selectUserList',
                data: params,
                type: 'get',
                dataType: 'json',
                contentType: 'application/json',
                withCredentials: true,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    if (data.ret == 200) {
                        var list = data.data.list;
                        var html = '';
                        for (var item of list) {
                            // '<td class="item-superior">' + item.refereesCode + '</td>' +
                            html += '<tr>' +
                                '<td class="item-realname">' + (item.realName || '') + '</td>' +
                                '<td class="item-name">' + (item.userName || '') + '</td>' +
                                '<td class="item-refereesName">' + (item.referName || '') + '</td>' +
                                '<td class="item-refereesCode">' + (item.refereesCode || '') + '</td>' +
                                '<td class="item-level">' + (item.role|| '') + '</td>' +
                                '<td class="item-isvip">'+(item.isVIP==1?'是':'否')+'</td>' +
                                '<td>' +
                                '<div class="layui-inline">' +
                                ' <button class="layui-btn  layui-btn-sm layui-btn-normal edit-btn" data-id="' +
                                item.id + '">' +
                                '<i class="layui-icon">&#xe642;</i>' +
                                '</button>' +
                                '</div>' +
                                ' </td>' +
                                '</tr>'
                        }
                        $('.table-content').html(html);
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'page',
                            count: data.data.total,
                            curr: requestData.currentNum,
                            jump: function(obj, first) {
                                //首次不执行
                                if (!first) {
                                    //do something
                                    requestData.currentNum = obj.curr;
                                    getList(requestData)
                                }
                            }
                        });
                    }else {
                        if(data.ret == 208){
                            parent.layer.alert(data.msg,{icon: 0},function () {
                                parent.location.href = 'login.html'
                            })
                        }else {
                            layer.msg(data.msg,{icon: 0,time: 1000});
                        }
                    }
                },
                error: function () {
                    layer.msg('网络错误，请稍后再试！');
                }
            })
        };
        // 初始数据请求
        getList(requestData);

        // 手机号搜索
        $('.searchphone').click(function() {
            requestData.currentNum = 1;
            requestData.currentSize = 10;
            $('input[name=searchtopphone]').val('');
            requestData.phone = $('input[name=searchphone]').val();
            requestData.referees = null;
            getList(requestData);
        });
        // 上级手机号搜索
        $('.searchtopphone').click(function () {
            requestData.currentNum = 1;
            requestData.currentSize = 10;
            $('input[name=searchphone]').val('')
            requestData.referees = $('input[name=searchtopphone]').val();
            requestData.phone = null;
            getList(requestData);
        });
        // 用户编辑
        $('.table-content').on('click', '.edit-btn', function() {
            var id = $(this).data('id');
            // console.log(id);
            $('#form').find('#user-id').val($(this).data('id'));
            $('#form').find('input[name=realname]').val($(this).parents('tr').find('.item-realname')
                .html());
            $('#form').find('input[name=refereesCode]').val($(this).parents('tr').find('.item-refereesCode')
                .html());
            $('#form').find('input[name=refereesName]').val($(this).parents('tr').find('.item-refereesName')
                .html());
            $('#form').find('input[name=name]').val($(this).parents('tr').find('.item-name')
                .html());
            $('#form').find('#level').val($(this).parents('tr').find('.item-level')
                .html());
            $('#isVIP').val($(this).parents('tr').find('.item-isvip').html() == "是" ? 1 : 0);
            form.render();
            layer.open({
                type: 1,
                content: $('.user-edit-popup'),
                title: '编辑用户',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: '500px',
                btn: ['提交', '取消'],
                yes: function(index, layero) {
                    submitFun();
                },
                end: function() {
                    clearFun();
                }
            });
            // 提交
            function submitFun() {
                var num = 0;
                var str = "";
                $("#form input.required").each(function(n) {
                    if ($(this).val() == "") {
                        layer.alert(str += "" + $(this).data("name") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }
                });
                if (num > 0) {
                    return false;
                } else {
                    var loading = layer.load(1, {
                        shade: [0.3, '#000']
                    });
                    var params = {
                        id: id,
                        realName: $('#form').find('input[name=realname]').val(),
                        userName: $('#form').find('input[name=name]').val(),
                        role: $('#form').find('select[name=level]').val(),
                        isVIP: Number($('#form').find('select[name=isVIP]').val())
                    }
                    $.ajax({
                        url: baseUrl + '/updateUser',
                        type: 'post',
                        data: JSON.stringify(params),
                        dataType: 'json',
                        contentType: 'application/json',
                        withCredentials: true,
                        xhrFields: {
                            withCredentials: true
                        },
                        success: function(res) {
                            layer.msg(res.data ? '修改成功': '修改失败', {
                                icon: res.data ? 1 : 0,
                                time: 1000
                            }, function() {
                                res.data && location.reload(); //刷新页面
                            });
                        },
                        error: function() {
                            layer.msg('网络发生故障，请稍后再试', {
                                icon: 0,
                                time: 1000
                            });
                        },
                        complete: function() {
                            layer.close(loading);
                        }
                    })
                }
            };
        })
        // 关闭弹出层时清除form表单
        function clearFun() {
            $("#form input").each(function(n) {
                $(this).val('');
            });
        };
    })
</script>
</body>

</html>
